<template>
  <div id="userList">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @top-status-change="handleTopChange" ref="loadmore">
      <ul>
        <user-list v-for="(item, index) in userInfo" :key="item.created_at" :item="item"></user-list>
      </ul>
      <div v-show="topStatus === 'loading'" slot="top" class="mint-loadmore-top">
        <p class="el-icon-loading"></p>
        <p>Loading...</p>
      </div>
      <div slot="bottom"></div>
    </mt-loadmore>
  </div>
</template>

<script>
  import list from './components/list';
  import {getUserList} from "../../api/request";
  import { Loadmore } from 'mint-ui';
  export default {
    name: "userList",
    data() {
      return {
        userInfo: Array,
        topStatus: '',
        allLoaded: false
      }
    },
    components: {
      'user-list': list,
      'mt-loadmore': Loadmore
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        getUserList().then(res => {
          console.log('res', res.promotion_records)
          const promotion_records = res.promotion_records;
          this.userInfo = promotion_records;
        }).catch(err => {
          console.log(err)
        })
      },
      loadTop(){
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        this.allLoaded = true;// 若数据已全部获取完毕
        this.$refs.loadmore.onBottomLoaded();
      },
      handleTopChange(status) {
        this.topStatus = status;
      }
    }
  }
</script>

<style scoped>
  #userList {
    background: rgb(234, 161, 5);
    color: rgb(255, 255, 255);
    min-height: 100%;
    margin: auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .mint-loadmore-top{
    text-align: center;
    font-size: .5rem;
    padding: .3rem;
  }
  .mint-loadmore-top p:last-child{
    font-size: .2rem;
    padding-top: .1rem;
    opacity: .8;
  }
</style>
